<template>
  <div class="main">
    <div class="head">
      <div class="back" @click="$router.back()">
        <img src="@/assets/img/3.png" />
      </div>
      <div class="searchbox">
        <input type="text" v-model="searchValue" :placeholder="$t('Search')" />
        <div class="searchiconbox" @click="search">
          <img src="@/assets/img/search.png" />
        </div>
      </div>
    </div>
    <div class="history" v-show="historyList.length">
      <!-- game name -->
      <div class="h-item" v-for="v in historyList" :key="v">
        {{ $t("Nama Permainan") }}
      </div>
    </div>
    <div class="games">
      <!-- Search results -->
      <div class="games-tit">{{ $t("HasilPencarian") }}</div>
      <div class="list" v-if="gameList.length">
        <div
          class="item"
          v-for="v in gameList"
          :key="v.id"
          @click="start(v.id)"
        >
          <img :src="v.cover" />
          <p>{{ v.name }}</p>
        </div>
      </div>
      <div class="nodata" v-else>
        <img src="@/assets/img/default.jpg" />
        <!-- No search data -->
        <p>{{ $t("TidakAdaDataPencarian") }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  httpSearchGame,
  httpPrepareEnterGame,
  httpEnterGame,
} from "@/http/api";
export default {
  name: "search",
  data() {
    return {
      searchValue: "",
      historyList: [],
      gameList: [],
      searchAjax: false,
      sid: "",
      startAjax: false,
    };
  },
  created() {
    // this.getHttpPrepareEnterGame()
  },
  methods: {
    async search() {
      if (this.searchAjax) return;
      if (!this.searchValue.trim()) return (this.gameList = []);
      this.searchAjax = true;
      let res = await httpSearchGame({ game_name: this.searchValue.trim() });
      this.searchAjax = false;
      if (res.code == 0) {
        this.gameList = res.data || [];
      } else {
        this.$toast.fail(res.message);
      }
    },
    async getHttpPrepareEnterGame() {
      let res = await httpPrepareEnterGame();
      if (res.code == 0) {
        this.sid = res.data.sid || "";
      }
    },
    async start(id) {
      if (this.startAjax) return;
      let params = {
        game_id: 1001 || id,
        language: "en",
        sid: this.sid,
      };
      this.startAjax = true;
      let res = await httpEnterGame(params);
      if (res.code == 0) {
        window.location.href = res.data || window.location.href;
      } else {
        this.$toast.fail(res.message);
      }
      this.startAjax = false;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 32px 0;

  .head {
    width: 100%;
    height: 92px;
    display: flex;
    align-items: center;
    padding-right: 32px;
    margin-bottom: 76px;

    .back {
      width: 104px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      user-select: none;

      img {
        width: 40px;
        height: 40px;
      }
    }

    .searchbox {
      display: flex;
      width: 100%;
      height: 92px;
      opacity: 1;
      background: rgba(246, 247, 252, 1);
      justify-content: space-between;
      align-items: center;
      padding: 0 10px 0 32px;
      border-radius: 20px;

      input {
        flex: 1;
        height: 100%;
        background: transparent;
        outline: none;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(132, 144, 177, 1);
        border: none;

        &::-webkit-input-placeholder {
          font-size: 28px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(193, 194, 211, 1);
        }
      }

      .searchiconbox {
        width: 76px;
        height: 76px;
        background: rgba(132, 144, 177, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        img {
          width: 48px;
          height: 48px;
        }
      }
    }
  }

  .history {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 32px;
    margin-bottom: 40px;

    .h-item {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(171, 182, 212, 1);
      background: rgba(249, 250, 252, 1);
      padding: 20px;
      border-radius: 20px;
      margin-right: 40px;
      margin-bottom: 20px;
    }
  }

  .games {
    padding: 0 32px;

    .games-tit {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 0px;
      color: rgba(112, 126, 162, 1);
      margin-bottom: 48px;
    }

    .list {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(3, 160px);
      grid-column-gap: 90px;

      .item {
        width: 100%;
        text-align: center;
        margin-bottom: 40px;

        img {
          width: 160px;
          height: 160px;
          border-radius: 20px;
          margin-bottom: 20px;
        }

        p {
          font-size: 28px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(132, 144, 177, 1);
        }
      }
    }
  }
}
</style>
